<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 第三步：在自定义组件的标签上 添加自定义属性:textone='父组件中的数据名' -->
        <text-one :textone='msg1'></text-one>
    </div>
    <script src="../vue.js"></script>
    <script>
        // 第二步：定义一个子组件
        Vue.component('text-one', {
            // 第四步：在自定义组件的对象中 添加props属性  他的值是一个数组，用来接收从父组件传来的数据  名称为标签上自定义的属性名
            props: ['textone'],
            // 第五步：定义一个模板 tempalte:`<div> 将数据更新到视图中 </div>`
            template: `
                <div>
                    {{textone}}
                </div>
            `
        })
        var vm = new Vue({
            el: '#app',
            data: {
                //第一步：在父组件上写好数据
                msg1: '1'
            }
        })
    </script>
</body>

</html>